<template>
    <transition name="yk-fade">
        <div class="yk-mask" :class="[type]" v-show="show"></div>
    </transition>
</template>

<script>
export default {
    name: "YK-Mask",
    props: {
        // 是否显示
        show: {
            type: Boolean,
            default: false
        },

        // 模式
        type: {
            type: String,
            default: ""
        }
    }
}
</script>

<style lang="scss">
.yk-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: var(--yk-z-index-mask);
    background-color: rgba(0,0,0,.6);

    &.tranparent {
        background-color: transparent;
    }

    &.white {
        background-color: rgba(255,255,255,.6);
    }
}
</style>
